<template>

	<view class="filter-main">
		<view class="filter-item" :class="filterConfig.keyword == item.value?'active-filter':''" v-for="item in filter"
			:key="item.value" @click="$emit('toFilter',item.value)">
			<text>{{item.name}}</text>
			<image v-if="item.value == 'filter'" src="/static/img/filter.png" mode="aspectFit"></image>
			<view v-if="item.value == 'price'" class="filter-uni">
				<view class="price-uni-top" :class="filterConfig.sort == 'asc' && filterConfig.keyword=='price'?'.active-uni':''"></view>
				<view class="price-uni-bot" :class="filterConfig.sort == 'desc' && filterConfig.keyword=='price' ?'.active-uni':''"></view>
			</view>
			<view v-if="item.value == 'uptime'" class="filter-uni">
				<view class="price-uni-top" :class="filterConfig.sort == 'asc' && filterConfig.keyword=='uptime'?'.active-uni':''"></view>
				<view class="price-uni-bot" :class="filterConfig.sort == 'desc' && filterConfig.keyword=='uptime' ?'.active-uni':''"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "filterHeader",
		props: {
			/**
			 * filter 便利的筛选项
			 * filterConfig 当前筛选配置项*/
			filter: {
				type: Array,
				default: () => [{
					name: '热门',
					value: 'host'
				}, {
					name: '价格',
					value: 'price'
				}, {
					name: '现货',
					value: 'now'
				}, {
					name: '筛选',
					value: 'filter'
				}]
			},
			filterConfig: {
				type: Object,
				default: () => ({
					sort: 'asc',
					keyword: 'host'
				})
			}
		}
	}
</script>

<style>
	.filter-main {
		width: 100%;
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
	}

	.filter-item {
		padding: 20rpx 0;
		border-bottom: 2px solid transparent;
	}

	.filter-item image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: bottom;
	}

	.active-filter {
		border-color: #ffb02e;
	}

	.filter-uni {
		display: inline-block;
		margin-left: 10rpx;
	}

	.price-uni-top {
		width: 0;
		height: 0;
		border-left: 8rpx solid transparent !important;
		border-right: 8rpx solid transparent !important;
		border-bottom: 10rpx solid #888888;
	}

	.price-uni-bot {
		width: 0;
		height: 0;
		border-left: 8rpx solid transparent !important;
		border-right: 8rpx solid transparent !important;
		border-top: 10rpx solid #888888;
		margin-top: 1px;
	}

	.active-uni {
		border-color: black;
	}
</style>